<template>
  <div class="app-container">
    <!-- 搜索相关区域 -->
    <div class="filter-container">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item  label="请求id：">
          <el-input
            v-model="form.appId"
            size="mini"
            clearable
          />
        </el-form-item>
        <el-form-item label="划转类型：">
          <template>
            <el-select
              v-model="form.type"
              size="small"
            >
              <el-option label="划转" value="0" />
              <el-option label="提现" value="1" />
            </el-select>
          </template>
        </el-form-item>
        <el-form-item label="状态：">
          <template>
            <el-select
              v-model="form.status"
              clearable
              placeholder="状态"
              size="small"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="search()">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 列表相关区域 -->
    <el-table
      :data="dataList"
      border
      style="width: 100%"
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
    >
      <!-- 名称 -->
      <el-table-column label="申请id" prop="appId" align="center" />
      <el-table-column label="批次id" prop="batchId" align="center" />
      <el-table-column label="类型" prop="type" align="center">
        <template slot-scope="{row}">
          <el-tag v-if="row.type === 0" size="small">划转</el-tag>
          <el-tag v-if="row.type === 1" size="small">提现</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="查询次数" prop="times" align="center" />
      <el-table-column label="请求内容" prop="content" align="center" show-overflow-tooltip />
      <el-table-column label="状态" prop="status" align="center" >
                <template slot-scope="{row}">
                  <el-tag v-if="row.status === 0" size="small">成功</el-tag>
                  <el-tag v-if="row.status === 1" size="small">待查询</el-tag>
                  <el-tag v-if="row.status === 2" size="small">失败</el-tag>
                </template>
      </el-table-column>
      <el-table-column label="错误日志" prop="msg" align="center" show-overflow-tooltip/>
      <el-table-column label="请求时间" prop="createTime" align="center" />
      <el-table-column label="修改时间" prop="updateTime" align="center" />

    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
    </el-pagination>

  </div>
</template>

<script>


export default {
  name: 'waterTable',
  data () {
    return {
      dataList:[],
      status: null,
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      // 查询的参数
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10// 每页显示多少条,
      },
      statusOptions: [
        {
          value: 0,
          label: '成功'
        },
        {
          value: 1,
          label: '待查询'
        },
        {
          value: 2,
          label: '失败'
        }
      ],
      // 返回参数
      pageVO: {
        list: [], // 返回的列表
        total: 0, // 一共多少条数据
        pages: 0 // 一共多少页
      },
      // loading
      dataListLoading: true, // 查询的参数
      form: {
        appId: null,
        type: null,
        status: null
      }
    }
  },
  mounted () {
    this.getDataList(this.page);
  },
  methods: {
    search () {
      this.page.currentPage = 1
      this.page.pageSize=10
      this.getDataList(this.page)
    },
    getDataList () {
      this.pageLoading = true
      this.$http({
        url: this.$http.adornUrl(`/admin/transferApply/selectListPage`),
        params: this.$http.adornParams(
          Object.assign({
              current: this.page == null ? this.page.currentPage : this.page.currentPage,
              size: this.page == null ? this.page.pageSize : this.page.pageSize
          },
            this.form
          )
        ),
        method: 'get'
      }).then(({ data }) => {
        this.dataList = data.records
        this.page.total = data.total
        this.dataListLoading = false
      })
    },
    //分页按钮
    handleSizeChange(val) {
      console.log(val)
      this.page.pageSize = val;
      this.getDataList(this.page);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getDataList(this.page);
    },
    // 重置
    resetQuery () {
      this.form.appId = null
      this.form.type = null
      this.form.status = null
      this.getDataList(this.page)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100px;
  }
}
</style>
